<template>
  <div class="md-experioncer">
    <div class="md-experioncer-container">
      <div class="md-swiper-box">
        <md-swiper :swiperData="swiperInfo" />
      </div>
      <div class="vip-box">
        <div class="t-block">
          <h3>体验师<span> / Top Expert Trier</span></h3>
          <p class="sign-now" @click="handleApply">
            <a href="javascript:;">Apply Right Now</a>
            <!-- <nuxt-link to="/experiencer/apply">立即申请</nuxt-link> -->
          </p>
        </div>
        <div class="b-block">
          <ul>
            <li>全年推荐项目不低于10次</li>
            <li>全年推荐项目不低于10次</li>
            <li>全年推荐项目不低于10次</li>
            <li>全年推荐项目不低于10次</li>
            <li>全年推荐项目不低于10次</li>
          </ul>
        </div>
      </div>
      <div style="width: 100%; display: flex; align-items: center; justify-content: center;">
        <div class="person-box">
          <ul class="person-list">
            <li class="person-item" v-for="(item, index) in applyListInfo" :key="index">
              <nuxt-link :to="{name: 'experiencer-detail', params: { userExperiencerId: item.userExperiencerId }}">
                <div class="head-pic">
                  <img :src="require('/assets/img/dynamic/avatar.png')" alt="" />
                </div>
                <h4>{{ item.name }}</h4>
                <p>{{ item.createTime && item.createTime.split(' ')[0] }}</p>
              </nuxt-link>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MdExperiencerComponent',
  layout: 'dynamic',
  data () {
    return {
      swiperInfo: [
        { img: require('@/assets/img/dynamic/original.jpeg') },
        { img: require('@/assets/img/dynamic/original.jpeg') },
        { img: require('@/assets/img/dynamic/original.jpeg') },
        { img: require('@/assets/img/dynamic/original.jpeg') }
      ],
      applyListInfo: []
    }
  },
  mounted () {
    this.getApplyInfo()
  },
  methods: {
    async getApplyInfo () {
      const options = {
        userId: this.$local.getItem('user').userId,
        pageIndex: 1,
        pageSize: 20
      }
      const res = await this.$axios.post('web/userExperiencer/listPage', options)
      if (res.code == 200) {
        this.applyListInfo = res.data.items
      }
    },
    async handleApply () {
      const user = this.$local.getItem('user')
      if (user) { // 已经登录
        // this.$router.push('/experiencer/apply')
        const res = await this.$axios.get(`web/userExperiencer/check/apply/${user.userId}`)
        if (res.code == 200) {
          if (res.data) { // 已经申请过，提示申请过了
            this.$message.warning('you applied!')
          } else { // 没申请跳转到 申请页
            let u = `/experiencer/apply?path=${this.$route.path}`
            if (this.$getParamsStr(this.$route.query)) {
              u += `&${this.$getParamsStr(this.$route.query)}`
            }
            this.$router.push(u)
          }
        }
      } else {
        this.$router.push({
          path: '/login',
          query: {
            turnBackPath: location.href
          }
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.md-experioncer {
  width: 100%;
  background: #fff;
  .md-experioncer-container {
    width: 100%;
    .md-swiper-box {
      width: 100%;
      margin-bottom: 20px;
    }
    .vip-box {
      margin-bottom: 20px;
      width: 100%;
      height: 205px;
      background: url('@/assets/img/dynamic/sxvip.png') no-repeat center center;
      -moz-background-size: 100% 100%;
      background-size: 101% 100%;
      background-clip: content-box;
      padding-bottom: 10px;
      box-sizing: border-box;
      .t-block {
        padding: 20px 40px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10px;
        h3 {
          line-height: 78px;
          font-size: 56px;
          font-weight: normal;
          text-align: center;
          color: #ffffff;
          span {
            font-size: 36px;
            color: rgba(255, 255, 255, 0.5);
          }
        }
        .sign-now {
          width: 216px;
          height: 38px;
          line-height: 40px;
          -moz-border-radius: 40px;
          border-radius: 40px;
          background-color: #ffffff;
          border: solid 1px #ffffff;
          font-size: 20px;
          text-align: center;
          cursor: pointer;
          a {
            display: inline-block;
            width: 100%;
            height: 100%;
            color: #5c38ba;
          }
        }
      }
      .b-block {
        width: 100%;
        ul {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          li {
            width: 20%;
            height: 34px;
            font-size: 12px;
            line-height: 34px;
            text-align: center;
            color: #ffffff;
            border-right: 1px dashed rgba(255, 255, 255, 0.3);
            &:last-child {
              border-right: none;
            }
          }
        }
      }
    }
    .person-box {
      width: 1000px;
      display: flex;
      justify-content: center;
      .person-list {
        width: 100%;
        max-width: 1200px;
        display: flex;
        flex-wrap: wrap;
        // justify-content: space-around;
        .person-item {
          width: 20%;
          cursor: pointer;
          margin-right: 20px;
          margin-bottom: 20px;
          a {
            display: flex;
            flex-direction: column;
            align-items: center;
            .head-pic {
              width: 100px;
              height: 100px;
              border-radius: 50%;
              overflow: hidden;
              img {
                width: 100%;
                height: 100%;
              }
            }
            h4 {
              margin-top: 14px;
              font-size: 14px;
              text-align: center;
              color: #06455d;
              @include line-ell(100%);
            }
            p {
              margin-top: 5px;
              line-height: 17px;
              font-size: 12px;
              text-align: center;
              color: #b3b3b3;
            }
          }
        }
      }
    }
  }
}
</style>
